<template>
  <div class="mine">
    <div class="top">
      <div class="container" @click="loginIt()">
        <van-image round src="https://img01.yzcdn.cn/vant/cat.jpeg" />
        <div class="v-login">请登录</div>
      </div>
    </div>

    <div class="v-order">
      <van-cell title="我的订单" is-link to="order" />
    </div>

    <van-grid clickable :column-num="4">
      <van-grid-item icon="idcard" text="待付款" to="/" />
      <van-grid-item icon="logistics" text="待收货" to="/" />
      <van-grid-item icon="chat-o" text="评价" to="/" />
      <van-grid-item icon="bill-o" text="退款售后" to="/" />
    </van-grid>

    <div class="v-feature">
      <van-cell title="我的资产" icon="gem-o" is-link to="order" />
      <van-cell title="优惠券" icon="vip-card-o" is-link to="order" />
      <van-cell title="我的收藏" icon="goods-collect-o" is-link to="order" />
      <van-cell title="地址管理" icon="location-o" is-link to="order" to/>
      <van-cell title="资质证照" icon="award-o" is-link to="order" />
      <van-cell title="协议规则" icon="records" is-link to="order" />
      <van-cell title="帮助与反馈" icon="description" is-link to="order" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Mine",
  data() {
    return {};
  },
  methods: {
    loginIt() {
      // console.log('跳转到登录页面');
      this.$router.push({ path: "/login" });
    },
  },
};
</script>

<style lang="less" scoped>
.mine {
  width: 100%;
  height: 100%;
  // 顶部头像
  .top {
    width: 100%;
    height: 100px;
    background-color: #845f3f;
    text-align: center;
    .container {
      width: 90%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: white;
      cursor: pointer;
      .van-image {
        width: 90px;
        height: 90px;
      }
    }
  }

  .v-order {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid black;
  }

  .van-grid{
    color:#845f3f;
  }

  .v-feature{
    width: 100%;
    height: 400px;
    .v-cell{
      border-bottom: 2px solid black;
    }
  }
}
</style>
